import React, {Component} from 'react';
import {Text,View,TouchableOpacity} from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import TrendingTop from "../pages/top/TrendingTop";
import NavigationBar from "../common/NavigationBar";
import TrendingDialog,{TimeSpans} from "../common/TrendingDialog";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";

const THEME_COLOR = '#678';  // 主题颜色
const Tab = createMaterialTopTabNavigator();

// 最热页面顶部可滑动导航栏，引用最热页面内容
export default class TrendingTopNavigation extends Component {
  constructor(props){
    super(props);
    this.state = {
      language: ['All','c','c++','js','python','c#'],
      timeSpan: TimeSpans[0]
    }
  }

  render() {
    let {language} = this.state;

    // 顶部状态栏
    let statusBar = {
      backgroundColor: THEME_COLOR,
      barStyle:'light-content'
    };

    // 顶部导航栏
    let navigationBar = <NavigationBar
      titleView={this.renderTitleView()}
      statusBar={statusBar}
      style={{backgroundColor:THEME_COLOR}}
    />;
    return (
      <View style={{flex:1}}>
        {/* 顶部状态栏和导航栏 */}
        {navigationBar}
        {/* 点击趋势，弹出modal */}
        <TrendingDialog
          ref={modal => this.trendingDialog = modal}
          onSelect = {item=>this.onSelectTimeSpan(item)}
          onClose = {this.onClose}
        />
        <Tab.Navigator tabBarOptions={{
          initialRouteName:language[0],
          scrollEnabled:true,
          tabStyle:{width:100},
          activeTintColor:'#fff',
          inactiveTintColor:'#c5c5c5',
          style:{backgroundColor:THEME_COLOR},
          indicatorStyle:{borderWidth:1,borderColor:'#fff'},
        }} lazy={true} lazyPlaceholder={this.loading}>
          {
            language.map((item,i)=>{
              return <Tab.Screen name={item} component={TrendingTop} key={i+item} options={{
                tabBarLabel:({color})=><Text style={{color:color}}>{item}</Text>,
              }}/>
            })
          }
        </Tab.Navigator>
      </View>
    );
  }

  // 顶部导航栏title
  renderTitleView = () => {
    let {timeSpan} = this.state;
    return <TouchableOpacity underlayColor={'transparent'} onPress={this.showTrendingDialog}>
      <View style={{flexDirection:'row',alignItems:'center'}}>
        <Text style={{fontSize:18,color:'#fff',fontWeight: '400'}}>
          趋 势 <Text style={{fontSize:12}}>{timeSpan.showText}</Text>
        </Text>
        <MaterialIcons name={'arrow-drop-down'} size={22} color={'white'}/>
      </View>
    </TouchableOpacity>
  };

  // 返回按钮
  onClose = () => {
    this.props.navigation.goBack()
  };

  // trendingDialog选中的text
  onSelectTimeSpan = (item) => {
    this.trendingDialog.dismiss();
    this.setState({
      timeSpan: item
    })
  };

  // 弹出TrendingDialog
  showTrendingDialog = () => {
    this.trendingDialog.show()
  };

  // 加载样式
  loading = () => {
    return <Text>正在加载中...</Text>
  }

}
